<div class="modal-content">
  <form novalidate (ngSubmit)="onSubmit(form)" [formGroup]="form">
    <div class="modal-header">
      <h5 class="modal-title">{{ 'users.title_edit_user' | translate }}</h5>
      <button
        type="button"
        class="btn-close"
        data-bs-dismiss="modal"
        [attr.aria-label]="'form.button_close' | translate"
        (click)="dismissModal()"
      ></button>
    </div>
    <div class="modal-body">
      <div class="text-center mb-3">
        <i class="fas fa-user-pen primary-text" style="font-size: 75px"></i>
      </div>
      <ul class="list-group list-group-box mb-0">
        <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
          <label for="form-username" class="mb-2 mb-md-0 w-100 w-md-50">{{ 'users.label_username' | translate }}</label>
          <div class="text-start text-md-end w-100 w-md-50">
            <input
              formControlName="username"
              type="text"
              id="form-username"
              autocomplete="off"
              autocapitalize="none"
              class="form-control custom-input"
              [attr.aria-label]="'users.label_username' | translate"
            />
          </div>
        </li>
        <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
          <label for="form-name" class="mb-2 mb-md-0 w-100 w-md-50">{{ 'users.label_full_name' | translate }}</label>
          <div class="text-start text-md-end w-100 w-md-50">
            <input
              formControlName="name"
              type="text"
              id="form-name"
              autocomplete="name"
              class="form-control custom-input"
              [attr.aria-label]="'users.label_full_name' | translate"
            />
          </div>
        </li>
        <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
          <label for="form-pass" class="mb-2 mb-md-0 w-100 w-md-50">{{ 'users.label_new_password' | translate }}</label>
          <div class="text-start text-md-end w-100 w-md-50">
            <input
              formControlName="password"
              type="password"
              autocomplete="new-password"
              id="form-pass"
              class="form-control custom-input"
              [ngClass]="{
                'is-invalid': form.controls.password.dirty && form.controls.password.errors
              }"
              [attr.aria-label]="'users.label_new_password' | translate"
            />
          </div>
        </li>
        @if (form.controls.password.value) {
        <li class="list-group-item d-flex flex-column flex-md-row align-items-center">
          <label for="form-pass-confirm" class="mb-2 mb-md-0 w-100 w-md-50"
            >{{ 'users.label_confirm_password' | translate }}</label
          >
          <div class="text-start text-md-end w-100 w-md-50">
            <input
              formControlName="passwordConfirm"
              type="password"
              autocomplete="new-password"
              id="form-pass-confirm"
              class="form-control custom-input"
              [ngClass]="{
                'is-invalid': form.controls.passwordConfirm.dirty && form.controls.passwordConfirm.errors
              }"
              [attr.aria-label]="'users.label_confirm_password' | translate"
            />
          </div>
        </li>
        }
        <li class="list-group-item d-flex justify-content-between align-items-center flex-row pb-2">
          <span class="text-start">{{ 'users.label_admin_user' | translate }}</span>
          <div class="text-end grey-text d-flex align-items-center">
            <input
              type="checkbox"
              class="rendux-input"
              formControlName="admin"
              id="isAdmin"
              [attr.aria-label]="'users.label_admin_user' | translate"
            />
            <label for="isAdmin" class="rendux-label ms-3"></label>
          </div>
        </li>
      </ul>
    </div>
    <div class="modal-footer justify-content-between">
      <div class="text-start">
        <button type="button" class="btn btn-elegant" data-bs-dismiss="modal" (click)="dismissModal()">
          {{ 'form.button_close' | translate }}
        </button>
      </div>
      <div class="text-center"></div>
      <div class="text-end">
        <button class="btn btn-primary" type="submit" [disabled]="!form.valid || isFormUnchanged()">
          {{ 'form.button_save' | translate }}
        </button>
      </div>
    </div>
  </form>
</div>
